<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script>
<div id="root">
	<ul>
		<li v-for='product in products | filterBy "水果" in "category" | orderBy "price" 0'>
			{{product.name}}-{{product.price | discount | currency}}
		</li>
	</ul>
	<ul>
		<li v-for='product in products | filterBy "水果" in "category" | orderBy "price" 0'>
			{{product.name}}-{{product.price | disc 25 | currency}}
		</li>
	</ul>
</div>
<script>
	/**
	 * 自定义过滤器
	 * 虽然VueJs给我们提供了很多强有力的过滤器，但有时候还是不够。值得庆幸的，Vue给我们提供了一个干净简洁的方
	 * 来定义我们自己的过滤器，之后我们就可以利用管道 “ | ” 来完成过滤。
	 * 定义一个全局的自定义过滤器，需要使用Vue.filter()构造器。这个构造器需要两个参数。
	 * Vue.filter() Constructor Parameters:
	 * 1.filterId: 过滤器ID，用来做为你的过滤器的唯一标识；
	 * 2.filter function: 过滤器函数，用一个function来接收一个参数，之后再将接收到的参数格式化为想要的数据结果。
	 * 上面的例子中，我们要实现商品价格打5折该怎么做呢？其实就是实现的一个自定义的过滤器，表示将商品的价格打了
	 * 折；而要实现它，需要完成的是：
	 * a、使用Vue.filter()构造器创建一个过滤器叫做discount
	 * b、输入商品的原价，能够返回其打五折之后的折扣价
	 */
	Vue.filter('discount',function(value){
		return value * 0.5;//打5折
	});
	var vm = new Vue({
		el : '#root',
		data : {
			products : [
		      {name: '苹果',price: 25,category: "水果"}, 
		      {name: '香蕉',price: 15,category: "水果"}, 
		      {name: '雪梨',price: 65,category: "水果"}, 
		      {name: '宝马',price: 2500,category: "汽车"},
		      {name: '奔驰',price: 10025,category: "汽车"}, 
		      {name: '柑橘',price: 15,category: "水果"}, 
		      {name: '奥迪',price: 25,category: "汽车"}
		    ]
		},
		filters : {
			disc : function(value,dicount){
				return value * (dicount/100);
			}
		}
	})
</script>	
</body>
</html>